// 右侧区域
import BasicInformation from "./BasicInformation"
import OverallAudit from "./OverallAudit"
import AuditPortrait from "./AuditPortrait"
import AuditRectification from "./AuditRectification"

const RightSided = ({ data = {}, title = "" }) => {
  const { basicInfo, auditOverview, auditWeakness, auditRectification } = data
  const scrollHandler = (e) => {
    const element = e.target
    var scrollTop = element.scrollTop // 垂直方向滚动的距离

    const rect = element.getBoundingClientRect()
    const rectHeight = rect.height

    const top2 = document.querySelector("#right-2").offsetTop
    const top3 = document.querySelector("#right-3").offsetTop
    const top4 = document.querySelector("#right-4").offsetTop

    // 中间父级 dom
    const dom = document.querySelector("#middle-container")
    const middleTop1 = document.querySelector("#section1").offsetTop
    const middleTop2 = document.querySelector("#section2").offsetTop
    const middleTop3 = document.querySelector("#section3").offsetTop
    const middleTop4 = document.querySelector("#section4").offsetTop

    let toTop = middleTop1

    if (scrollTop + rectHeight <= top2 + 150) {
      toTop = middleTop1
    } else if (scrollTop + rectHeight <= top3 + 150) {
      toTop = middleTop2
    } else if (scrollTop + rectHeight <= top4 + 150) {
      toTop = middleTop3
    } else {
      toTop = middleTop4
    }

    dom.scrollTo({
      top: toTop,
      behavior: "smooth"
    })
  }

  return (
    <div
      className="text-[14px] flex flex-col w-[720px] h-[932px] p-[15px] rounded-[12px]"
      style={{
        backgroundImage: `linear-gradient(180deg, rgba(218, 235, 255, 0.4616) -1%, rgba(242, 249, 255, 0.3917) 125%)`,
        border: "1px solid white"
      }}
    >
      <div
        className="w-[322px] h-[38px] pl-[36px] text-[22px] font-[900]"
        style={{
          backgroundImage: `url('assistant-decision/top-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        审计画像
      </div>
      <div className="mt-[24px] h-[42px] ml-[30px] mr-[30px] flex items-center justify-between">
        <div
          className="flex-none h-[17px] w-[108px]"
          style={{
            backgroundImage: `url('assistant-decision/title_left_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            backgroundPosition: "100%"
          }}
        ></div>
        <div className="text-[24px] font-[700] flex-1 text-center">
          {title}审计画像评价
        </div>
        <div
          className="flex-none h-[17px] w-[108px]"
          style={{
            backgroundImage: `url('assistant-decision/title_right_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "contain"
          }}
        ></div>
      </div>
      <div
        onScroll={scrollHandler}
        className="relative flex-1 pr-[5px] overflow-y-auto overflow-x-hidden scroll-smooth custom-scrollbar"
      >
        <BasicInformation id="right-1" data={basicInfo} />
        <OverallAudit id="right-2" data={auditOverview} />
        <AuditPortrait id="right-3" data={auditWeakness} />
        <AuditRectification id="right-4" data={auditRectification} />
      </div>
    </div>
  )
}

export default RightSided
